<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <title></title>
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/common.js"></script>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link href="css/style.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
    <header class="mui-bar mui-bar-nav layout-bg">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left l-arrow"></a>
        <h1 class="mui-title">我的消息</h1>
    </header>

    <div class="order-bar layout-gap">
        <div class="flex-box">
            <a class="order-flex flex" id="my_message">
                <span class="order-flex-check">任务消息</span>
            </a>
            <a class="order-flex flex">
                <span>系统消息</span>
            </a>
        </div>
    </div>

    <div class="message-box">
    	<div id="refreshContainer" class="mui-content mui-scroll-wrapper" style="padding-top: 0;">
  			<div class="mui-scroll">
			    <!--数据列表-->
			    <ul class="mui-table-view mui-table-view-chevron">
			        <li class="message-item mar-b-10">
			            <div class="message-item-top">
			                <span class="yellow-circular fl"></span>
			                <div class="message-title fl">订单接单成功</div>
			                <div class="message-time fr">9-18 18:30</div>
			            </div>
			            <p class="message-content">你已成功接收用户yema的搬家服务</p>
			            <p class="message-content">订单编号：64678377934</p>
			        </li>
			
			        <li class="message-item mar-b-10">
			            <div class="message-item-top">
			                <span class="yellow-circular fl"></span>
			                <div class="message-title fl">订单接单成功</div>
			                <div class="message-time fr">9-18 18:30</div>
			            </div>
			            <p class="message-content">你已成功接收用户yema的搬家服务</p>
			            <p class="message-content">订单编号：64678377934</p>
			        <li>
			
			        <li class="message-item mar-b-10">
			            <div class="message-item-top">
			                <span class="yellow-circular fl"></span>
			                <div class="message-title fl">订单接单成功</div>
			                <div class="message-time fr">9-18 18:30</div>
			            </div>
			            <p class="message-content">你已成功接收用户yema的搬家服务</p>
			            <p class="message-content">订单编号：64678377934</p>
			        </li>
			
			        <li class="message-item mar-b-10">
			            <div class="message-item-top">
			                <span class="yellow-circular fl"></span>
			                <div class="message-title fl">订单接单成功</div>
			                <div class="message-time fr">9-18 18:30</div>
			            </div>
			            <p class="message-content">你已成功接收用户yema的搬家服务</p>
			            <p class="message-content">订单编号：64678377934</p>
			        </li>
		        </ul>
	        </div>
        </div>
    </div>

    <!--<p class="read-more">没有更多了！</p>-->
</div>

<script type="text/javascript">
	$(function() {
		mui.init({
			pullRefresh : {
			    container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
			    down : {
			      style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
			      color:'#ff850b', //可选，默认“#2BD009” 下拉刷新控件颜色
			      height:'50px',//可选,默认50px.下拉刷新控件的高度,
			      range:'100px', //可选 默认100px,控件可下拉拖拽的范围
			      offset:'74px', //可选 默认0px,下拉刷新控件的起始位置
			      auto: true,//可选,默认false.首次加载自动上拉刷新一次
			      callback: ()=> {
			      	setTimeout(()=> {
			      		mui('#refreshContainer').pullRefresh().endPulldown();
			      	}, 1000)
			      } 
			    },
			    up : {
			      height:50,//可选.默认50.触发上拉加载拖动距离
			      auto:false,//可选,默认false.自动上拉加载一次
			      contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
			      contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
			      callback : ()=> {
			      	setTimeout(()=> {
			      		mui('#refreshContainer').pullRefresh().endPullup(false);
			        }, 1000)
			      }
			    }
		    },
		});
		
		mui.plusReady(()=> {
			mui('.flex-box').on('tap', '#my_message', ()=> {
//	    		mui.openWindow({
//					url: 'system-settings.html',
//					id: 'system-settings.html'
//				});
	    	});
		})
	})
</script>
</body>
</html>